<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<div>aaa</div>
<div class="header">bbb</div>
<div id="ab">ccc</div>

<script>
	//$("div").css('color','red')
	//1.独立的单元
	//  -->

(function (global) {

	function jQuery(selector) {
		//1.获取页面中所有的元素
		//2.把这个元素放到一个特定的对象中
		return new jQuery.fn.init(selector);
	}

	//jquery对象的构造函数

	jQuery.fn = jQuery.prototype = {
		constructor: jQuery,
	    init: function(selector) {
		    //jquery内容封装了一个Sizzle引擎来获取DOM元素

		    //把DOM放到这个对象中
		    const elements = document.querySelectorAll(selector);
		    //为了让这些元素可以在css方法中访问，所以要把这些元素放在对象上面进行传递
		    //this.elements = elements;
		    // -->jquery为了后续DOM操作的方便，奖这些获取到的DOM元素全部放在了对象自己身上，让自己变成一个就像数组一样，可以使用for循环进行遍历，我们把这种对象特性称之为[伪数组]

		    //把这个所有DOM元素都添加到自己身上
		    for(let i=0;i<elements.length;i++){
			    // ele: DOM元素
			    this[i] = elements[i];
		    }
		    this.length = elements.length;
	    },
	    css(name,value){
		    for(let i=0;i<this.length;i++){
			    let element = this[i];
			    element.style[name] = value;
		    }
	    }
	}

	jQuery.fn.init.prototype = jQuery.fn;

	jQuery.fn.extend = jQuery.extend = function (...args) {
	  //2个extend方法区别在于：
	    // -->1.接收数据的对象发生了变化
		    //    -->$.extend：第一个实参
		    //    -->$.fn.extend：this
	    // -->2.提供数据的对象发生了变化
	        //    -->$.extend：第二个参数及其后面的参数
	        //    -->$.fn.extend：所有的参数

	  // 后面拷贝过程都是一样的

	  let target,source = []

	      source = [...args]

	  //判断2种情况
	  if(this === jQuery){
	    //$.extend
	    target = args[0]
	    source.splice(0,1)
	  }else {
	  	// $.fn.extend
		target = this
	  }

	  source.forEach((item)=>{
	  	// item:就是第一个数据源对象（提供数据的对象）

	    //　取出对象中的每一个属性
	    // console.log(Object.keys(item))
		Object.keys(item).forEach((key)=>{
			target[key] = item[key]
		})
	  })

	  return target


	  /*

	  //这里extend方法参数并不确定
	  //所以建议不要指定形参，通过函数内置对象arguments操作
	  //console.log(args);

	  var target = args[0];

	  //进行对象拷贝，需要将第二个参数及其以后的所有参数的属性遍历添加到第一个参数中
	  for(let i=0;i<args.length;i++){
	  	//每一个实参：对象
	  	let arg = args[i]
	    //取出对象中的每一个属性
	    for(let key in arg){
	  		//取出属性值
	  		// let value = arg[key];
	  		//把该属性添加到第一个参数中
		    target[key] = arg[key];
	    }
	  };

	  return target;
	  */
	}

	global.$=global.jQuery = jQuery;


})(window)
var p = {};
$.extend(p,{a:10},{b:20})
console.log(p)

$.fn.extend({
  abc(){
  	console.log('abc')
  }
})

</script>
</body>
</html>